<template>
    <div class="result-area">
        <NewCard title="运算结果" v-if="resultShow == 1">
            <div class="result-box">
                <h3>{{selectInfo.companyName||selectInfo.userName}}</h3>
                <el-table :data="resultList" style="width: 100%">
                    <el-table-column width="50" align="center" label="编号" type="index" :index="indexMethod">
                    </el-table-column>
                    <el-table-column label="预计可贷(万)" align="center" class="bright">
                        <template slot-scope="scope">
                            <p :class="getOptimalLimit(scope.row.actualAmount)">{{getRoDecimal(scope.row.actualAmount/10000)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="名义利率" align="center">
                        <template slot-scope="scope">
                            <p :class="getOptimalint(scope.row.nominalRate)">{{scope.row.nominalRate}}%</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="年利息(万)" align="center">
                        <template slot-scope="scope">
                            <p :class="getOptimalinterest(scope.row.expectedInterest)">{{getRoDecimal(scope.row.expectedInterest/10000)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="贷款年限" align="center">
                        <template slot-scope="scope">
                            <p :class="getTerm(scope.row.term)">{{getRoDecimal(scope.row.term)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="办结天数" align="center">
                        <template slot-scope="scope">
                            <p :class="getOptimalDay(scope.row.closingDays)">{{scope.row.closingDays}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="大约收费(万)" align="center">
                        <template slot-scope="scope">
                            <p :class="getExpectedCost(scope.row.expectedCost)">{{scope.row.expectedCost/10000}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="选择" width="50" align="center">
                        <template slot-scope="scope">
                            <el-radio v-model="selectRadio" :label="scope.row.id" @change="changeRadio(scope.row)"></el-radio>
                        </template>
                    </el-table-column>
                </el-table>
                <p class="hintp">
                    <span>* 共计{{resultList.length}}个贷款产品可供参考</span>
                    <span>* 具体贷款利息及期限等要素，以银行审批为准。</span>
                    <span>* 服务费金额超过千分之五按千分之五算。</span>
                </p>

                <!-- 底部按钮 -->
                <div class="subBtn">
                    <SubBtn>
                        <template slot="btn">
                            <el-button round class="shareBtn" @click="clickJumn">委托办理</el-button>
                        </template>
                    </SubBtn>
                </div>
                <!-- 底部按钮 -->
            </div>
        </NewCard>

        <!-- 项目流程的模块 -->
        <div class="flow" v-else-if="resultShow == 2">
            <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn"/>
            <Flow 
                :firstName="firstName"
                :secondaryName="secondaryName"
                :threeName="`秒贷`"
                :currentDetail="currenSelect">
            </Flow>
        </div>

        <!-- 项目流程的支付模块 -->
        <div class="pay" v-else>
            <Pay
                :project="project"
                :orderinfo="orderinfo"
                :step="step"
                :flowId="flowId">
            </Pay>
        </div>
    </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import Flow from "@/BMViews/views/project/flow.vue";
import Pay from "@/BMViews/views/project/Pay.vue"
import {getLoanProjectTypeIdApi} from "@/wss/newApi_3-24/tool/loan.js"
import {getFindProjectTypelistApi} from "@/wss/newApi_3-24/work/projectType.js";
import {editLoanUserApi} from "@/BMViews/api/tool/loanUser.js"
import {toDecimal} from "@/wss/utils/wss.js"
export default {
    components:{
        NewCard,
        SubBtn,
        Flow,
        Pay
    },
    props:{
        resultsData:{
            type: Array,
        },
        selectInfo:{
            type: Object
        },
        loanUserId:{
            type: String
        },
    },
    data(){
        return{
            resultShow: 1,//1运算结果展示 2项目步骤  3支付

            projectList:[],//项目的数据
            firstName:'',//项目一级名称
            secondaryName:'',//项目二级名称
            secondaryList: [],//项目二级数据
            threeName:'',//项目三级名称
            currenSelect: {},//项目三级的数据

            // 传给支付的数据
            project: {},//发送给支付页面的数据
            orderinfo: {},//订单信息
            step:[],//步骤的数据
            flowId: '',// 当前下单的步骤id

            // 运算结果
            resultList:[],
            selectRadio:'',//选择的运算结果id
            selectRadioInfo: {},//选择的运算结果信息

            projectType1:'',//智慧贷款一级id
            projectType2:'',//智慧贷款二级id
            link: '',//跳转的地址
        }
    },
    watch:{
        resultsData(newVale,oldValue){
            this.resultList = JSON.parse(JSON.stringify(this.resultsData))
        },
    },
    async mounted(){
        await this.getProjectTypelist() //获取项目类型列表
        await this.getLoanProjectTypeId()// 查询智慧贷款的一级id和二级id
        // 获取项目的一级名称、二级名称
        this.getFlowInfoData()
        this.resultList = JSON.parse(JSON.stringify(this.resultsData))

        //修改右侧显示的状态 点击支付的回调
        this.$bus.$on('handlerPay',(num,project,orderinfo,step,flowId)=>{
            this.resultShow = 3
            this.project = project
            this.orderinfo = orderinfo
            this.step = step
            this.flowId = flowId
        })
    },
    methods:{
        //获取项目类型列表
        async getProjectTypelist() {
            let result = await getFindProjectTypelistApi();
            if (result.code == 200) {
                this.projectList = result.rows;
            }
        },

        // 查询智慧贷款的一级id和二级id
        async getLoanProjectTypeId(){
            let result = await getLoanProjectTypeIdApi()
            if(result.code==200){
                this.projectType1 = result.projectType1
                this.projectType2 = result.projectType2
            }
        },

        // 获取项目的一级名称、二级名称
        getFlowInfoData(){
            // 获取一级数据
            let oneTypeObj = {}
            oneTypeObj = this.projectList.find(item=>{
                return item.id == this.projectType1
            })
            this.firstName = oneTypeObj.name //一级名称
            // 获取二级数据
            let twoTypeObj = {}
            twoTypeObj = oneTypeObj.children.find(item=>{
                return item.id == this.projectType2
            })
            this.secondaryList = twoTypeObj.children //二级的数据
            this.secondaryName = twoTypeObj.name //二级名称
        },

        // 跳转对应的智慧贷款项目
        async clickJumn(){
            if(this.selectRadio == ''){
                this.$message({message: '请选择一条运算结果',type: 'warning'})
                return
            }
            // 跳转到当前项目
            // this.$router.push({path: this.link})

            // 传 id=loanUserId
            await this.editLoanUser({id: this.loanUserId || this.selectInfo.id})
            // 跳转到项目流程
            this.resultShow = 2
        },

        // 修改贷款用户的信息 这里传 id=loanUserId
        async editLoanUser(data){
            let result = await editLoanUserApi(data)
            if(result.code!=200) return
        },
        
        // 项目流程点击返回
        returnBtn(){
            this.resultShow = 1
        },
         
        // 选择的时候
        changeRadio(row){
            // let type = "Bm-project"
            // this.link = `/${type}/${this.projectType1}?typeId=${this.projectType2},${three}`
            this.selectRadioInfo = row
            // 过滤出项目三级的名称和三级的数据
            this.currenSelect = this.secondaryList.find(item=>{
                return item.id==row.projectId
            })
            // this.threeName = this.currenSelect.name //三级的名称
            this.threeName = '秒贷' //三级的名称
        },

        // 自定义索引
        indexMethod(inedx){
            if (inedx >= 0 && inedx <= 25) {
                return String.fromCharCode(65 + inedx);
            } 
        },

        //获取最优贷款额
        getOptimalLimit(actualAmount){
            let max = 0
            let num = Number(actualAmount)
            for (let i = 0; i < this.resultList.length; i++) {
                if(this.resultList[i].actualAmount>max){
                    max = this.resultList[i].actualAmount
                }
            }
            if(num==max){
                return 'isLight'
            }
        },

        //获取最优实际利率
        getOptimalint(nominalRate){
            let arr = []
            let num = Number(nominalRate)
            for (let i = 0; i < this.resultList.length; i++) {
                arr.push(this.resultList[i].nominalRate)
            }
            let min = Math.min(...arr)
            if(num==min){
                return 'isLight'
            }
        },

        //获取最优预估利息
        getOptimalinterest(expectedInterest){
            let arr = []
            let num = Number(expectedInterest)
            for (let i = 0; i < this.resultList.length; i++) {
                arr.push(this.resultList[i].expectedInterest)
            }
            let min = Math.min(...arr)
            if(num==min){
                return 'isLight'
            }
        },

        // 获取最优的贷款年限
        getTerm(term){
            let arr = []
            let num = Number(term)
            for (let i = 0; i < this.resultList.length; i++) {
                arr.push(this.resultList[i].term)
            }
            let min = Math.max(...arr)
            if(num==min){
                return 'isLight'
            }
        },

        //获取最优办结天数
        getOptimalDay(closingDays){
            let arr = []
            let num = Number(closingDays)
            for (let i = 0; i < this.resultList.length; i++) {
                arr.push(this.resultList[i].closingDays)
            }
            let min = Math.min(...arr)
            if(num==min){
                return 'isLight'
            }
        },

        //获取最优大约收费
        getExpectedCost(expectedCost){
            let arr = []
            let num = Number(expectedCost)
            for (let i = 0; i < this.resultList.length; i++) {
                arr.push(this.resultList[i].expectedCost)
            }
            let min = Math.min(...arr)
            if(num==min){
                return 'isLight'
            }
        },
        
        // 获取两位小数
        getRoDecimal(num){
            return toDecimal(num)
        },
        
        // 获取两位小数
        getToDecimal(x) {
            if (x < 0.01) {
                return x
            } else {
                var f = parseFloat(x);
                if (isNaN(f)) {
                    return;
                }
                f = Math.round(x * 100) / 100;
                return f;
            }
        }
    },
}
</script>

<style scoped>
ul,p,h3,h4 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.result-area .flow{
    position: relative;
    height: 100%;
}
.result-area .flow .returnIcon{
    position: absolute;
    top: 13px;
    left: 26px;
    z-index: 99;
    font-size: 20px;
    background-color: #fff;
    cursor: pointer;
}
.result-area .pay{
    height: 100%;
}

.result-box h3{
    font-size: 20px;
    font-weight: 600;
    color: #39486F;
    margin-top: 15px;
    margin-bottom: 30px;
}
.el-table{
    margin-bottom: 15px;
}

.hintp{
    font-size: 13px;
    color: #f87a23;
    line-height: 22px;
    margin-bottom: 60px;
}
.hintp>span{
    display: block;
}
::v-deep .el-table tr .is-leaf:nth-child(2) > .cell,
::v-deep .el-table tr .is-leaf:nth-child(3) > .cell,
::v-deep .el-table tr .is-leaf:nth-child(4) > .cell,
::v-deep .el-table tr .is-leaf:nth-child(5) > .cell{
    /* padding-left: 25px; */
}
::v-deep .el-table .cell p{
    display: inline-block;
    text-align: center;
}
::v-deep .el-table .cell p.isLight{
    color: #08C160;
    background-color: #ECF9F2;
    border-radius: 30px;
    padding: 0 15px;
}
</style>
<style scoped>
/* 底部按钮 */
::v-deep .subBtn .subBtn{
    justify-content: flex-end;
    align-items: center;
    padding: 10px 30px;
}
::v-deep .subBtn .subBtn>p{
    line-height: 36px;
    font-size: 14px;
    font-weight: 600;
    color: #999999;
    cursor: pointer;
}
::v-deep .statusBox .subBtn .subBtn{
    justify-content: space-between;
    align-items: center;
}
.subBtn .sharespan{
    font-size: 12px;
    font-weight: 400;
    color: #39486F;
}
.subBtn .shareBtn{
    color: #fff!important;
    border-color: #f87a23;
    background-color: #f87a23;
}
</style>